<template>
  <!-- hideOnSinglePage：是否隐藏页码
      :datasource="accounts"
   -->
  <div>
    <el-card class="card"
             shadow="never">
      <UserSearch @search="reload"></UserSearch>
    </el-card>
    <el-card class="card"
             shadow="never">
      <ele-pro-table ref="table"
                     :columns="columns"
                     :datasource="datasource"
                     :selection.sync="selection"
                     :need-page="true"
                     :hideOnSinglePage="false">
        <template v-slot:accountType="{ row }">
          <el-tag :type="row.accountType == '1' ? 'success' : ''">
            {{ accountType(row.accountType) }}
          </el-tag>
        </template>
        <template v-slot:currentStatus="{ row }">
          <el-tag :type="applyForType(row.currentStatus).type">
            {{ applyForType(row.currentStatus).status }}
          </el-tag>
        </template>
        <!-- 状态列 -->
        <template v-slot:invoiceUrl="{ row }">
          <el-tag v-if="(row.invoiceType=='1')"
                  type="danger">无需发票</el-tag>
          <el-tag v-if="(row.invoiceType=='2')"
                  type="success">需要发票</el-tag>
          <div style="margin-top: 5px;"
               v-if="(row.invoiceType=='2')">

            <el-link type="primary"
                     :underline="false"
                     icon="el-icon-view"
                     @click="openInvoice(row)">
              查看
            </el-link>
            <el-link type="primary"
                     :underline="false"
                     icon="el-icon-_download"
                     @click="handleDownload(row)">
              下载发票
            </el-link>
          </div>

        </template>
        <!--操作-->
        <template v-slot:action="{ row }">
          <div class="flex-around">
            <el-link type="primary"
                     v-if="row.currentStatus=='1'"
                     icon="el-icon-time"
                     @click="examineFn(row)"
                     :underline="false">
              审核
            </el-link>

            <el-popconfirm class="ele-action"
                           title="是否确定要删除该笔体现审核信息"
                           @confirm="remove(row)">
              <template v-slot:reference>
                <el-link type="danger"
                         icno='el-icon-finished'
                         :underline="false"
                         icon="el-icon-delete">
                  删除
                </el-link>
              </template>
            </el-popconfirm>
          </div>
        </template>

      </ele-pro-table>
      <el-image-viewer v-if="showViewer"
                       style="z-index: 9999"
                       :on-close="closeViewer"
                       :url-list="urlListArray" />
      <el-dialog :visible.sync="dialogVisible"
                 width="845px">

        <iframe :src="iframeUrl"
                height="900px;"
                width="800px"></iframe>

      </el-dialog>
    </el-card>
    <!--关闭回调   :before-close="handleClose"-->
    <!--从右往左标题-->

    <user-edit :id="id"
               :visible.sync="visible"
               :data="examineInfo"
               @done="reload" />

  </div>
</template>

<script>
// 导入组件
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
import { insertSelective, receivingaccountDelete, reflectPageList, brokeragePageList, reflectPageListDelete } from '@/api/oem/index'
import UserSearch from './user-search.vue';
import userEdit from './user-edit.vue'
// import html from "./html"
export default {
  components: { UserSearch, ElImageViewer, userEdit },
  props: {
    // 表格数据
    accountForm: Object,
  },
  created () {
    console.log("进入账户列表格groupList", this.groupList)

  },
  data () {
    return {

      loading: false,
      id: '',

      dialogVisible: false,
      iframeUrl: '',
      visible: false,
      showViewer: false,
      // 是否显示编辑弹窗
      showEdit: false,
      brokerageList: [],
      urlListArray: [],
      stautsIndex: '',
      examineInfo: {},
      selection: [],
      childSelect: [],
      //   隐藏审核按钮
      examineFnButton: true,
      // 0未发布1发布中2发布完成3发布错误
      stautsList: [
        {
          name: '全部',
          id: ''
        },
        {
          name: '待发布',
          id: 0
        },
        {
          name: '发布中',
          id: 1
        },
        {
          name: '发布成功',
          id: 2
        },
        {
          name: '发布失败',
          id: 3
        }
      ],

      // 表格列配置
      columns: [
        {
          columnKey: 'selection',
          type: 'selection',
          width: 45,
          align: 'center',
          fixed: 'left',
          sortable: true
        },
        {
          columnKey: 'index',
          type: 'index',
          label: '序号',
          width: 60,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left',
          sortable: true
        },

        {
          prop: 'oemCode',
          label: '代理名称',
          sortable: 'custom',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 80,
          sortable: true
        },
        {
          prop: 'withdrawalAmount',
          label: '申请金额',
          sortable: 'custom',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 80,
          sortable: true
        },
        {
          prop: 'accountType',
          label: '收款类型',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 110,
          slot: 'accountType',
          sortable: true,
          align: 'center'
        },
        {
          prop: 'receivingAccount',
          label: '收款账户',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 110,
          sortable: true,
          align: 'center'
        },
        {
          prop: 'currentStatus',
          label: '当前状态',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 110,
          sortable: true,
          slot: 'currentStatus',
          align: 'center',
        },
        {
          prop: 'invoiceUrl',

          label: '发票上传',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 130,
          slot: 'invoiceUrl',
          align: 'center',
          sortable: true,
        },
        {
          prop: 'createDate',
          label: '申请时间',
          sortable: 'custom',
          showOverflowTooltip: true,
          minWidth: 100,
          sortable: true,
          formatter: (_row, _column, cellValue) => {
            return this.$util.toDateString(cellValue);
          }
        },
        {
          columnKey: 'action',
          label: '操作',
          width: 200,
          align: 'center',
          resizable: false,
          slot: 'action',
          showOverflowTooltip: true,
          fixed: 'right'
        }
      ],
    };
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    },
    applyForType () {
      return function (applyType) {
        if (applyType == '1') {
          return {
            status: '申请中',
            type: ''
          };
        } else if (applyType == '2') {
          return {
            status: '已经通过',
            type: 'success'
          };
        } else {
          return {
            status: '已经驳回',
            type: 'danger'
          };
        }
      };
    },
    accountType () {
      return function (applyType) {
        if (applyType == '1') {
          return '银行卡';
        } else {
          return '支付宝';
        }
      };
    },

  },
  methods: {
    async examineFn (row) {

      this.examineInfo = { id: row.id, groundsForRejection: row.groundsForRejection, currentStatus: row.currentStatus, oemId: row.oemId, withdrawalAmount: row.withdrawalAmount }
      this.visible = true

    },
    modifyReject (id) {
      this.id = id
      this.showEdit = true
    },
    stautsClick (index) {
      this.stautsIndex = index

    },
    /* 删除 */
    remove (row) {
      const loading = this.$loading({ lock: true });
      reflectPageListDelete({ id: row.id })
        .then((msg) => {
          loading.close();
          this.$message.success(msg.msg);
          this.reload();

        })
        .catch((e) => {
          loading.close();
          this.$message.error(e.msg);
        });
    },
    // 下载图片

    handleDownload (file) {
      console.log(file)
      window.open(file.invoiceUrl
      );
    },
    // 关闭查看器
    closeViewer () {
      this.showViewer = false;
    },
    // 查看图片
    openInvoice (row) {
      console.log(row.invoiceUrl)
      var ext = row.invoiceUrl.substring(row.invoiceUrl.lastIndexOf(".") + 1);
      console.log(ext)
      if (ext == 'pdf') {

        this.dialogVisible = true
        this.iframeUrl = row.invoiceUrl
      } else {
        this.showViewer = true
        this.urlListArray = [row.invoiceUrl]
      }


    },
    datasource ({ page, limit, where, order }) {
      //   console.log(where, order);
      //   if (!where.deleted) where.deleted = 0;
      //   this.reflectList = await reflectPageList({ ...where, ...order, page, limit });
      //   return this.reflectList
      return reflectPageList({ ...where, ...order, page, limit });

    },


    /* 刷新表格 */
    reload (where) {
      this.$refs.table.reload({ page: 1, where: where });
    },



  }
};
</script>
<style scoped lang="less">
/*‘单选框’转‘多选框’样式*/
/*  /deep/ .el-radio__inner {
      border-radius: 2px !important;
    }

    /deep/ .el-radio__input.is-checked .el-radio__inner::after {
      content: '';
      width: 8px;
      height: 3px;
      border: 1px solid white;
      border-top: transparent;
      border-right: transparent;
      text-align: center;
      display: block;
      position: absolute;
      top: 3px;
      left: 2px;
      transform: rotate(-45deg);
      border-radius: 0px;
      background: none;
    }*/

.btn-class {
  margin: 10px 0;
  .el-button {
    padding: 0;
    width: 94px;
    border-radius: 2px;
    height: 33px;
  }
}
.top-padding {
  padding: 32px 32px 55px;
  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 19px;
  }
  .color333 {
    font-weight: 700;
    font-size: 24px;
  }
  .end-time {
    margin-top: 15px;
    color: #757575;
    .empower {
      margin: 0 16px 0 4px;
      color: #31a952;
    }
    .expire {
      margin: 0 16px 0 4px;
      color: #d03050;
    }
  }
  .numberCount {
    width: calc(100% / 3);
    span {
      color: #757575;
    }
    div {
      margin-top: 11px;
      color: #1e6ceb;
      font-size: 32px;
    }
  }
}
/*数据刷新 按钮*/
.btn-refresh {
  background: #1e6ceb;
  border-radius: 2px;
  margin: 0 31px 17px;
}
.m-table {
  margin: 0 28px 0 24px;
  .stauts-class,
  .sel-stauts-class {
    font-size: 16px;
    margin: 0 52px 0 26px;
    padding: 23px 0px 15px;
    line-height: 19px;
  }
  .stauts-class {
    color: #757575;
  }
  .sel-stauts-class {
    color: #1e6ceb;
    border-bottom: 3px solid #1e6ceb;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
  }
  /* 置顶 样式*/
  .top-class {
    width: 43px;
    color: #1e6ceb;
    font-size: 12px;
    background: #ddf0ff;
    border-radius: 2px;
  }
  /*成功*/
  .success {
    width: 57px;
    height: 27px;
    background: #ddf0ff;
    border-radius: 2px;
  }
  /*待发布*/
  .s-dai {
    color: #1e6ceb;
  }
  /*失败*/
  .fail {
    color: #757575;
  }
}
.v-icon,
.expired-icon {
  padding: 1px 7px;
  border-radius: 2px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  /*font-size: 14px;*/
}
.v-icon {
  color: #18a058;
  background-color: rgba(24, 160, 88, 0.1);
  border: 1px solid rgba(24, 160, 88, 0.3);
}
.expired-icon {
  color: #d03050;
  background-color: rgba(208, 48, 80, 0.08);
  border: 1px solid rgba(208, 48, 80, 0.23);
}
.i-class {
  margin-top: 2px;
  font-size: 20px;
  color: rgb(24, 160, 88);
}
.sel-dy:hover,
.sel-ks:hover {
  transform: scale(1.1);
  transition: 0.8s all linear;
}
/*添加授权*/
.dy-icon,
.sel-dy,
.sel-ks {
  color: #fff;
  margin: 5px 0px;
  /*margin: 5px 30px;*/
  background: #b3abab;
  width: 188px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  border-radius: 15px;
  cursor: pointer;
  transition: 0.8s all linear;
}
.sel-dy {
  background: #000;
}
.sel-ks {
  background: linear-gradient(rgb(251, 152, 0) 0%, rgb(243, 120, 3) 100%);
}
/*一键检测登录状态*/
.workplace-goal-group {
  position: relative;
  .workplace-goal-content {
    .icon-size {
      position: absolute;
      top: 58px;
      font-size: 40px;
      color: rgb(32, 160, 255);
    }
    div {
      position: absolute;
      top: 68px;
      font-size: 18px;
      color: #a1a1a1;
    }
  }
  .progress-hint {
    color: #000;
    padding: 20px 0 10px;
    div {
      margin-bottom: 6px;
    }
  }
}
.btn-all {
  margin: 50px 0 20px;
}
</style>
